<template>
	<div class="tobuy">
		<v-Header :item="headerMess"></v-Header>
		<v-Content>
			<div class="title">
				<div>{{equityName}} <a>{{equityCode}}</a></div>
				
				<p>今天还可买<span>{{data.leftBuy}}</span>次</p>
			</div>
			<div class="money">
				<div>点买金额</div>
			</div>
			<div class="main">
				<div class="box" :class="{'act':falg==index}" v-for="(item,index) in arr" @click='toActive(index,item)'>{{item}}万</div>
			</div>
			<p class="num">可买入<span>{{data.number}}</span>股，资金利用率<span>&nbsp;&nbsp;{{data.use | toPercent}}</span></p>
			<v-BuyBottom :item="data.stopLoss"  @ievent ="ievent"></v-BuyBottom>
		</v-Content>
		<div class="bottomButton">
	      	<span class="active" @click='login'>提交</span>
	    </div>
	</div>
	
</template>

<script>
	import deal from '@/api/deal/index'
	import { toast } from '@/util/index'
	import Content from '@/components/ContentCenter'
	import Header from '@/components/Header'
	import BuyBottom from '@/components/BuyBottom'
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				headerMess:{
			        src:require("../../assets/nav_back.png"),
			        headerText: '点买A股',
			        right: ''
			    },
			    equityCode:"",
			    equityName:"",
			    data:[{
			    	use:0
			    }],
			    falg:0,
			    arr:[],
			    num:"",
			    stopLossLine:"",
				stopProfitLine:"",
				paidFee:"",
				lossLimit:"",
				deposit:"",
				divideScale:""
			    
			    
			 
			}
		},
		
		filters:{
			toPercent(point){
			    var str=Number(point*100).toFixed(1);
			    str+="%";
			    return str;
			},
		},
		methods:{
			ievent(buyNum){
			    this.stopLossLine=buyNum.stopLossLine
	    		this.stopProfitLine=buyNum.stopProfitLine 
	    		this.paidFee=buyNum.paidFee
	    		this.lossLimit=buyNum.lossLimit
	    		this.deposit=buyNum.deposit
	    		this.divideScale=buyNum.divideScale
				
			},
			
			toActive(index,item) {
	            this.falg = index;
	            this.num=item;
	            let routerParams = this.$route.query.equityCode;
				this.equityCode=routerParams;
				this.equityName=this.$route.query.equityName;
				let senddata = {
					userId:window.localStorage.getItem("token"),
					code:routerParams,
					level:item,
					plat:"mlj"
				}
				deal.buyInitJson(senddata).then((res) => {
					if (res.data.code == 200) {
						 	//console.log(res.data.data);
						 	this.data=res.data.data;
						 	this.arr=res.data.data.tradeCredit.split(',');
						 	//console.log(this.arr);
						
					} else {
						toast(res.data.message)
					}
				})
	            
	        },
	        login(){
	        	let senddata = {
					userId:window.localStorage.getItem("token"),
					tradeCredit:this.num,
					code:this.$route.query.equityCode,
					stopLossLine: this.stopLossLine,
					stopProfitLine:this.stopProfitLine,
					divideScale:this.divideScale,
					paidFee:this.paidFee,
					lossLimit:this.lossLimit,
					deposit:this.deposit
					
				}
				deal.buyJson(senddata).then((res) => {
					if (res.data.code == 200) {
						let instance = Toast('点买成功');
						instance.className="dd";
						setTimeout(() => {
						  instance.close();
						  this.$router.push({path:'/tAdd1',
						  query: {
				                "stockNum": this.$route.query.equityCode
			            	}});
						}, 2000);
						  
					} else {
						toast(res.data.message)
					}
				})
	        }
			
		},
		components:{
			"v-Header":Header,
			'v-Content': Content,
			"v-BuyBottom":BuyBottom
		},
		mounted(){
			let routerParams = this.$route.query.equityCode;
			this.equityCode=routerParams;
			this.equityName=this.$route.query.equityName;
			let senddata = {
				userId:window.localStorage.getItem("token"),
				code:routerParams,
				level:""
			}
			deal.buyInitJson(senddata).then((res) => {
				if (res.data.code == 200) {
					 	this.data=res.data.data;
					 	this.arr=res.data.data.tradeCredit.split(',');
					 	this.num=this.arr[0];
					
				}else if(res.data.code==222){
		            this.$router.push({path:'/login'})
		        } else {
					toast(res.data.message)
				}
			})
		},
		 beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		      next()
		  }
	}
	
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';	

.tobuy{
	background:#141723;
	width:100%;
		.title{
			background:#141723;
		padding: 0 @p30;
		height:1.1733rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color:white;
		div{
			color: white;
			font-size: @f34;
			
		}
		a{
			font-size: @f24;
			color:@Color;
			
		}
		p{
			font-size: @f24;
			span{
				color: #ea375c;
			}
		}
	}
	.money{
		background:#141723;
		padding: 0 @p30;
		height:1.2266rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color:white;
		border-top:1px solid #262934 ;
		font-size: @f32;
	}
	.main{
		
		background:#141723;
		margin: 0 @p30;
		display: block;
		overflow: hidden;
		width: 9.2rem;
		display:flex;
        list-style:none;
        flex-flow:row wrap;
		.box{
			display: inline-block;
			width: 2.296rem;
			height: 1.466666rem;
			background: ;
			color: #56627c;
			font-size: 0.48rem;
			line-height: 1.466666rem;
			text-align: center;
			border: 1px solid #262934;
		}
		.act{
			background: #FFDD25;
			color: #8D4006;
		}
	}
	.num{
		background:#141723;
		font-size: @f24;
		color: white;
		padding: @f26  @p30 @f32;
		span{
			color: #ea3157;
		}
	}
	
	
	
	
	
	
	
	
	
	.bottomButton {
	  width: 100%;
	  height: 1.3066rem;
	  line-height: 1.3066rem;
	  position: fixed;
	  bottom: 0;
	  z-index: 9999;
	  background-color: @liBg;
	  text-align: center;
	  font-size: .48rem;
	  span {
	    display: inline-block;
	    width: 9.2rem;
	    height: 1.17333rem;
	    line-height: 1.17333rem;
	    background-color: #0b101c;
	    color: #56627c;
	    border-radius: 0.08rem;
	  }
	  .active {
	    border: none;
	    background-color: #ffdd25;
	    color: #8d4106;
	  }
	}
}


</style>